<template>
  <div class="lotteryDesc hideScrollBar" ref="scrollEl">
    <div class="lotteryDesc-bg"></div>
    <!-- 导航 -->
    <NavBar
      isFixed
      :isShadow="false"
      :title="t('lotteryMoney.desc_navTitle')"
      isTransparent
      :navScorllOffset="60"
      navScorllColor="#FFF"
      :scrollEl="scrollEl"
      @thresholdChange="(val) => (pageData.isShowAnchor = val)"
      @getNavBarHeight="(h) => (pageData.navBarHeight = h)"
    />
    <!-- 内容部分 -->
    <div class="content">
      <!-- 定位锚点 tab -->
      <div
        v-if="pageData.isShowAnchor"
        class="anchor items-center hideScrollBar"
        style="height: 54px"
        ref="anchorEl"
      >
        <div
          v-for="(item, index) in pageData.refs"
          :key="index"
          class="anchor-item"
          :class="{ 'anchor-activity': pageData.currentIdx === index }"
          :ref="(el) => setRefAction(el, index)"
          @click="anchorJump(index)"
        >
          {{ item.title }}
        </div>
      </div>
      <!-- 正文 -->
      <div style="position: relative; padding-top: 20px">
        <!-- 玩法介绍 -->
        <div ref="group1"></div>
        <Group
          class="content-group"
          order="1"
          :title="$t('lotteryMoney.desc_title1')"
        >
          <div class="items-center group-item" style="margin-top: 20px">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div class="group-text">
              {{ $t("lotteryMoney.v3Desc_1_text1") }}
            </div>
          </div>
          <div class="group1-nums items-center">
            <div
              class="group1-nums-item"
              v-for="item in [
                1,
                2,
                3,
                4,
                5,
                6,
                7,
                8,
                9,
                'a',
                'b',
                'c',
                'd',
                'e',
                'f',
              ]"
            >
              <img
                class="group1-nums-item-bg"
                src="/image/lottery-v3/num-zj-bg1.svg"
              />
              <div class="group1-nums-item-text">{{ item }}</div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div class="group-text">
              {{ $t("lotteryMoney.v3Desc_1_text2") }}
            </div>
          </div>
        </Group>
        <!-- 下注 -->
        <div ref="group2"></div>
        <Group
          class="content-group"
          order="2"
          :title="$t('lotteryMoney.desc_title1_text11')"
        >
          <!-- 正文 -->
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title1_title3") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.v3Desc_2_text2") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.v3Desc_2_text3") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.v3Desc_2_text4") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.mfxz") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.v3Desc_2_text6") }}
              </div>
            </div>
          </div>
        </Group>
        <!-- 奖池分配 -->
        <div ref="group3"></div>
        <Group
          class="content-group"
          order="3"
          :title="$t('lotteryMoney.desc_title2')"
        >
          <!-- 表格 -->
          <div class="table3">
            <div class="table3-item-header table3-item items-center">
              <span>{{ $t("lotteryMoney.v3Desc_3_text1") }}</span>
              <span>{{ $t("lotteryMoney.v3Desc_3_text2") }}</span>
            </div>
            <div class="table3-item items-center">
              <span>{{ $t("lotteryMoney.ydj") }}</span>
              <span>30%</span>
            </div>
            <div class="table3-item items-center">
              <span>{{ $t("lotteryMoney.edj") }}</span>
              <span>30%</span>
            </div>
            <div class="table3-item items-center">
              <span>{{ $t("lotteryMoney.v3Desc_3_text3") }}</span>
              <span>30%</span>
            </div>
            <div class="table3-item items-center">
              <span>{{ $t("lotteryMoney.v3Desc_3_text4") }}</span>
              <span>10%</span>
            </div>
          </div>
          <!-- 正文 -->
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div class="group-text">
              {{ $t("lotteryMoney.v3Desc_3_text5") }}
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div class="group-text">
              {{ $t("lotteryMoney.v3Desc_3_text6") }}
            </div>
          </div>
        </Group>
        <!-- 周五超级奖池 -->
        <div ref="group4"></div>
        <Group
          class="content-group"
          order="4"
          :title="$t('lotteryMoney.friJcTitle')"
        >
          <div class="items-center group-item" style="margin-top: 20px">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div class="group-text">
              {{ $t("lotteryMoney.friQualification_desc1") }}
            </div>
          </div>

          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div class="group-text">
              {{ $t("lotteryMoney.friQualification_desc2") }}
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div class="group-text">
              {{ $t("lotteryMoney.friQualification_desc3") }}
            </div>
          </div>
        </Group>

        <!-- 奖项/奖品 -->
        <div ref="group5"></div>
        <Group
          class="content-group"
          order="5"
          :title="$t('lotteryMoney.v3Desc_tab4')"
        >
          <!-- 表格 -->
          <div class="table4">
            <div class="table4-item-header table4-item items-center">
              <span style="width: 30%">{{
                $t("lotteryMoney.v3Desc_4_text1")
              }}</span>
              <span class="table4-item-w40">{{
                $t("lotteryMoney.v3Desc_4_text2")
              }}</span>
              <span style="width: 30%; text-align: right">{{
                $t("lotteryMoney.v3Desc_4_text3")
              }}</span>
            </div>
            <div class="table4-item items-center">
              <div class="table4-item-pd8 items-center" style="width: 30%">
                <img
                  class="table4-item-icon"
                  src="/image/lottery-v3/result-ydj-icon.svg"
                />
                <div>{{ $t("lotteryMoney.ydj") }}</div>
              </div>
              <span class="table4-item-w40 table4-item-pd8">{{
                $t("lotteryMoney.v3Desc_4_text5")
              }}</span>
              <span
                style="width: 30%; text-align: right"
                class="table4-item-pd8"
              >
                {{ $t("lotteryMoney.jc30") }}
              </span>
            </div>
            <div class="table4-item items-center">
              <div style="width: 30%" class="table4-item-pd8 items-center">
                <img
                  class="table4-item-icon"
                  src="/image/lottery-v3/result-edj-icon.svg"
                />
                <div>{{ $t("lotteryMoney.edj") }}</div>
              </div>

              <span class="table4-item-w40 table4-item-pd8">{{
                $t("lotteryMoney.v3Desc_4_text6")
              }}</span>
              <span
                class="table4-item-pd8"
                style="width: 30%; text-align: right"
                >{{ $t("lotteryMoney.max10$") }}</span
              >
            </div>
            <div class="table4-item items-center">
              <div style="width: 30%" class="table4-item-pd8 items-center">
                <img
                  class="table4-item-icon"
                  src="/image/lottery-v3/result-sdj-icon.svg"
                />
                <div>{{ $t("lotteryMoney.sdj") }}</div>
              </div>
              <span class="table4-item-w40 table4-item-pd8">{{
                $t("lotteryMoney.v3Desc_4_text7")
              }}</span>
              <span
                class="table4-item-pd8"
                style="width: 30%; text-align: right"
                >500 BDC</span
              >
            </div>
            <div class="table4-item items-center">
              <div style="width: 30%" class="table4-item-pd8 items-center">
                <img
                  class="table4-item-icon"
                  src="/image/lottery-v3/result-cyj-icon.svg"
                />
                <div>{{ $t("lotteryMoney.cyj") }}</div>
              </div>
              <span class="table4-item-w40 table4-item-pd8">{{
                $t("lotteryMoney.v3Desc_4_text8")
              }}</span>
              <span
                class="table4-item-pd8"
                style="width: 30%; text-align: right"
                >100 BDC</span
              >
            </div>
          </div>

          <!-- 正文 -->
          <div class="items-center group-item" style="margin-top: 20px">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />

            <div class="group-text">
              {{ $t("lotteryMoney.v3Desc_4_text9") }}
            </div>
          </div>
        </Group>
        <!-- 如何中奖 -->
        <div ref="group6"></div>
        <Group
          class="content-group"
          order="6"
          :title="$t('lotteryMoney.v3Desc_tab5')"
        >
          <!-- 正文 -->
          <div class="items-center group-item" style="margin-bottom: 12px">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div class="group-text">
              {{ $t("lotteryMoney.v3Desc_5_text1") }}
            </div>
          </div>
          <!-- 中奖号码 -->
          <div class="group5-title">
            {{ $t("lotteryMoney.v3Desc_5_text2") }}
          </div>
          <div class="group5-nums items-center">
            <div class="group5-nums-item" v-for="item in [1, 3, 2, 'f', 4]">
              <img
                class="group1-nums-item-bg"
                src="/image/lottery-v3/num-zj-bg1.svg"
              />
              <div class="group1-nums-item-text">{{ item }}</div>
            </div>
          </div>
          <!-- 下注号码 -->
          <div class="group5-title">
            {{ $t("lotteryMoney.v3Desc_5_text3") }}
          </div>
          <!-- 一等奖 -->
          <div class="group5-item">
            <div class="group5-text">
              {{ $t("lotteryMoney.v3Desc_5_text4") }}
            </div>
            <!-- 号码 -->
            <div class="group5-item-nums items-center">
              <div
                class="group5-item-nums-item"
                v-for="item in [1, 2, 3, 4, 'f']"
              >
                <img
                  class="group5-item-nums-item-bg"
                  src="/image/lottery-v3/num-zj-bg1.svg"
                />
                <div class="group5-item-nums-item-text">{{ item }}</div>
              </div>
            </div>
          </div>
          <!-- 二等奖 -->
          <div class="group5-item">
            <div class="group5-text">
              {{ $t("lotteryMoney.v3Desc_5_text5") }}
            </div>
            <!-- 号码 -->
            <div class="group5-item-nums items-center">
              <div
                class="group5-item-nums-item"
                v-for="item in includesNumToArr('132f4', '192f4')"
                :key="item.str"
              >
                <img
                  v-if="item.include"
                  class="group5-item-nums-item-bg"
                  src="/image/lottery-v3/num-zj-bg1.svg"
                />
                <img
                  v-else
                  class="group5-item-nums-item-bg"
                  src="/image/lottery-v3/num-xz-bg1.svg"
                />
                <div
                  class="group5-item-nums-item-text"
                  :class="{
                    'group5-item-nums-item-text-xz': !item.include,
                  }"
                >
                  {{ item.str }}
                </div>
              </div>
            </div>
          </div>
          <!-- 三等奖 -->
          <div class="group5-item">
            <div class="group5-text">
              {{ $t("lotteryMoney.v3Desc_5_text6") }}
            </div>
            <!-- 号码 -->
            <div class="group5-item-nums items-center">
              <div
                class="group5-item-nums-item"
                v-for="item in includesNumToArr('132f4', 'ffc32')"
                :key="item.str"
              >
                <img
                  v-if="item.include"
                  class="group5-item-nums-item-bg"
                  src="/image/lottery-v3/num-zj-bg1.svg"
                />
                <img
                  v-else
                  class="group5-item-nums-item-bg"
                  src="/image/lottery-v3/num-xz-bg1.svg"
                />
                <div
                  class="group5-item-nums-item-text"
                  :class="{
                    'group5-item-nums-item-text-xz': !item.include,
                  }"
                >
                  {{ item.str }}
                </div>
              </div>
            </div>
          </div>
          <!-- 参与奖 -->
          <div class="group5-item" style="margin-bottom: 0">
            <div class="group5-text">
              {{ $t("lotteryMoney.v3Desc_5_text7") }}
            </div>
            <!-- 号码 -->
            <div class="group5-item-nums items-center">
              <div
                class="group5-item-nums-item"
                v-for="item in includesNumToArr('132f4', '71df6')"
                :key="item.str"
              >
                <img
                  v-if="item.include"
                  class="group5-item-nums-item-bg"
                  src="/image/lottery-v3/num-zj-bg1.svg"
                />
                <img
                  v-else
                  class="group5-item-nums-item-bg"
                  src="/image/lottery-v3/num-xz-bg1.svg"
                />
                <div
                  class="group5-item-nums-item-text"
                  :class="{
                    'group5-item-nums-item-text-xz': !item.include,
                  }"
                >
                  {{ item.str }}
                </div>
              </div>
            </div>
          </div>
        </Group>
        <!-- 开奖号码如何生成 -->
        <div ref="group7"></div>
        <Group
          class="content-group"
          order="7"
          :title="$t('lotteryMoney.v3Desc_tab6')"
        >
          <!-- 正文 -->
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />

            <div class="group-text">
              {{ $t("lotteryMoney.v3Desc_6_text1") }}
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />

            <div class="group-text">
              {{ $t("lotteryMoney.v3Desc_6_text2") }}
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />

            <div class="group-text">
              {{ $t("lotteryMoney.v3Desc_6_text3") }}
            </div>
          </div>
        </Group>
        <!-- 开奖 -->
        <div ref="group8"></div>
        <Group
          class="content-group"
          order="8"
          :title="$t('lotteryMoney.v3Desc_tab7')"
        >
          <!-- 正文 -->
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.v3Desc_7_text1") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.v3Desc_7_text2") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.v3Desc_7_text3") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.v3Desc_7_text4") }}
              </div>
            </div>
          </div>
        </Group>
        <!-- 兑奖 -->
        <div ref="group9"></div>
        <Group
          class="content-group"
          order="9"
          :title="$t('lotteryMoney.djBtn')"
        >
          <!-- 正文 -->
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div class="group-text">
              {{ $t("lotteryMoney.redemption_text1") }}
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div class="group-text">
              {{ $t("lotteryMoney.redemption_text2") }}
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div class="group-text">
              {{ $t("lotteryMoney.redemption_text3") }}
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div class="group-text">
              {{ $t("lotteryMoney.redemption_text4") }}
            </div>
          </div>
        </Group>
        <!-- 免费下注卡 -->
        <div ref="group10"></div>
        <Group
          class="content-group"
          order="10"
          :title="$t('lotteryMoney.desc10_title')"
        >
          <!-- 正文 -->
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div class="group-text">
              {{ $t("lotteryMoney.desc10_title_text1") }}
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div class="group-text">
              {{ $t("lotteryMoney.desc10_title_text2") }}
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div class="group-text">
              {{ $t("lotteryMoney.desc10_title_text3") }}
            </div>
          </div>
        </Group>
      </div>
    </div>
    <!-- 利用相应式原理，监听多个数值变化 -->
    <div style="position: absolute; bottom: -990px; left: -999px">
      {{ currentIdx }}
    </div>
  </div>
</template>
<script setup name="lotteryDesc">
import Group from "@/components/desc/group.vue";
import { useElementBounding } from "@vueuse/core";
import { useGlobalStore } from "~~/store/global";

const globalStore = useGlobalStore();
const { t } = useI18n();

// 页面属性
const pageData = reactive({
  isShowAnchor: false,
  navBarHeight: 0,
  currentIdx: -1,
  scrollIng: false,
  refs: [],
  anchorRefs: [],
});

//将循环ref放入到数组中
const setRefAction = (el, item) => {
  pageData.anchorRefs[item] = el;
};

const anchorJump = (idx) => {
  pageData.currentIdx = idx;
  pageData.scrollIng = true;
  let offsetTop = 0;

  if (idx > 0 && pageData.refs[idx].ref.offsetTop) {
    // console.log("--pageData[id]--", pageData.refs[idx].ref);
    offsetTop = pageData.refs[idx].ref.offsetTop - pageData.navBarHeight - 54;
  }
  // console.log(offsetTop, "--id--", idx);
  if (scrollEl.value) {
    scrollEl.value.scrollTo({
      top: offsetTop,
      behavior: "smooth",
    });
  }
  setTimeout(() => {
    pageData.scrollIng = false;
  }, 800);
};

const scrollEl = ref();
const anchorEl = ref();
const group1 = ref();
const group2 = ref();
const group3 = ref();
const group4 = ref();
const group5 = ref();
const group6 = ref();
const group7 = ref();
const group8 = ref();
const group9 = ref();
const group10 = ref();

const { y: group1_top } = useElementBounding(group1);
const { y: group2_top } = useElementBounding(group2);
const { y: group3_top } = useElementBounding(group3);
const { y: group4_top } = useElementBounding(group4);
const { y: group5_top } = useElementBounding(group5);
const { y: group6_top } = useElementBounding(group6);
const { y: group7_top } = useElementBounding(group7);
const { y: group8_top } = useElementBounding(group8);
const { y: group9_top } = useElementBounding(group9);
const { y: group10_top } = useElementBounding(group10);

const currentIdx = computed({
  get() {
    if (pageData.scrollIng) return pageData.currentIdx;
    if (group1_top.value < 64 && group1_top.value > 0) {
      pageData.currentIdx = 0;
    } else if (group2_top.value < 64 && group2_top.value > 0) {
      pageData.currentIdx = 1;
    } else if (group3_top.value < 110 && group3_top.value > 0) {
      pageData.currentIdx = 2;
    } else if (group4_top.value < 110 && group4_top.value > 0) {
      pageData.currentIdx = 3;
    } else if (group5_top.value < 110 && group5_top.value > 0) {
      pageData.currentIdx = 4;
    } else if (group6_top.value < 110 && group6_top.value > 0) {
      pageData.currentIdx = 5;
    } else if (group7_top.value < 110 && group7_top.value > 0) {
      pageData.currentIdx = 6;
    } else if (group8_top.value < 110 && group8_top.value > 0) {
      pageData.currentIdx = 7;
    } else if (group9_top.value < 110 && group9_top.value > 0) {
      pageData.currentIdx = 8;
    } else if (group10_top.value < 110 && group10_top.value > 0) {
      pageData.currentIdx = 8;
    }

    return pageData.currentIdx;
  },

  set(val) {
    pageData.currentIdx = val;
  },
});
watch(
  () => pageData.currentIdx,
  (newVal) => {
    if (newVal > -1 && pageData.anchorRefs[pageData.currentIdx] && anchorEl) {
      let offsetTop = pageData.anchorRefs[pageData.currentIdx].offsetLeft;
      anchorEl.value.scrollTo({
        left: offsetTop - 88,
        behavior: "smooth",
      });
    }
  }
);

// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase

onMounted(() => {
  firebase?.logEvent("BDC_H5_LotteryV3_Desc_PUV");
  pageData.refs = [
    {
      title: t("lotteryMoney.desc_title1"),
      ref: group1,
    },
    {
      title: t("lotteryMoney.desc_title1_text11"),
      ref: group2,
    },
    {
      title: t("lotteryMoney.v3Desc_tab3"),
      ref: group3,
    },
    {
      title: t("lotteryMoney.friJcTitle"),
      ref: group4,
    },
    {
      title: t("lotteryMoney.v3Desc_tab4"),

      ref: group5,
    },
    {
      title: t("lotteryMoney.v3Desc_tab5"),

      ref: group6,
    },
    {
      title: t("lotteryMoney.v3Desc_tab6"),

      ref: group7,
    },
    {
      title: t("lotteryMoney.v3Desc_tab7"),

      ref: group8,
    },
    {
      title: t("lotteryMoney.djBtn"),
      ref: group9,
    },
    {
      title: t("lotteryMoney.desc10_title"),
      ref: group10,
    },
  ];
});

/**
 * @description: 匹配中奖号码
 * 1. 重复出现的数字,要根据数量显示
 * @param {*} a 中奖号码
 * @param {*} b 下注号码
 * @return {*} c 下注号码,与中奖号码匹配的结果
 * @author: zhj1214
 */
const includesNumToArr = (a, b) => {
  const charMapA = new Map();

  // 构建字符映射表，记录字符在 a 中的数量
  for (let char of a) {
    charMapA.set(char, (charMapA.get(char) || 0) + 1);
  }

  let c = [];
  for (let char of b) {
    const countInA = charMapA.get(char);
    if (countInA && countInA > 0) {
      c.push({ str: char, include: true });
      charMapA.set(char, countInA - 1);
    } else {
      c.push({ str: char, include: false });
    }
  }
  return c;
};
</script>
<style lang="scss" scoped>
.lotteryDesc {
  position: relative;
  background-color: #f0f3fa;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-bottom: var(--safe-area-inset-bottom);

  &-bg {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 300 * 2px;
    background: linear-gradient(
      180deg,
      #96c9ff 0.07%,
      rgba(226, 236, 255, 0) 99.93%
    );
  }
}
.anchor {
  position: fixed;
  padding-left: 15 * 2px;
  left: 0;
  background-color: #fff;
  // background: linear-gradient(180deg, #ecf5ff 0%, #f9fcff 100%);
  box-shadow: 0px 2px 8px 0px rgba(21, 81, 145, 0.16);
  z-index: 999;
  width: 100vw;
  overflow-x: scroll;
  overflow-y: hidden;

  &-activity {
    padding: 0 12 * 2px;
    border-radius: 28px;
    background: #e1efff;
    color: #007bff;
  }
  &-item {
    font-weight: 590;
    white-space: nowrap;
    margin-right: 24 * 2px;
    font-size: 13 * 2px;
    height: 26 * 2px;
    line-height: 26 * 2px;
    text-align: center;
  }
}

.content {
  position: relative;
  z-index: 2;
  &-group {
    margin: 0 * 2px 15 * 2px 10 * 2px 15 * 2px;
  }
}

.group {
  &-item {
    margin-top: 12 * 2px;
    align-items: flex-start;
  }
  &-title {
    color: #007bff;
    font-size: 13 * 2px;
    font-weight: 590;
    margin-bottom: 5 * 2px;
  }
  &-text {
    color: #141924;
    font-size: 13 * 2px;
    &-icon {
      width: 9 * 2px;
      height: 9 * 2px;
      margin-top: 3 * 2px;
      margin-right: 9 * 2px;
    }
  }
}

.step {
  margin-top: 20 * 2px;

  &-row1 {
    justify-content: space-between;
  }
  &-row2 {
    justify-content: space-between;
    margin: 3 * 2px 0;
  }
  &-row3 {
    justify-content: space-between;
  }

  &-item {
    justify-content: center;
    padding: 12 * 2px 8 * 2px;
    word-break: break-word;
    width: 164 * 2px;
    min-height: 50 * 2px;
    border-radius: 8 * 2px;
    border: 2px solid #007bff;
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    text-align: center;
    font-size: 11 * 2px;
    font-weight: 590;
  }
}

.table3 {
  margin-top: 20 * 2px;
  border-radius: 8 * 2px;
  overflow: hidden;
  &-item {
    height: 40 * 2px;
    padding: 10 * 2px;
    justify-content: space-between;
    background-color: #f0f7ff;
    color: #141924;
    font-size: 13 * 2px;
    &-header {
      background: linear-gradient(
        90deg,
        #007bff 0.34%,
        #00b2ff 100%
      ) !important;
      color: #fff !important;
      font-size: 12 * 2px;
      font-weight: 590;
    }
  }
}

.table4 {
  margin-top: 20 * 2px;
  border-radius: 8 * 2px;
  overflow: hidden;
  &-item {
    height: 48 * 2px;

    justify-content: space-between;
    background-color: #f0f7ff;
    color: #141924;
    font-size: 12 * 2px;
    font-weight: 400;

    &-header {
      padding: 8 * 2px;
      background: linear-gradient(
        90deg,
        #007bff 0.34%,
        #00b2ff 100%
      ) !important;
      color: #fff !important;
      font-size: 12 * 2px;
      font-weight: 590;
    }

    &-icon {
      width: 24 * 2px;
      height: 24 * 2px;
      margin-right: 10 * 2px;
    }

    &-pd8 {
      padding: 8 * 2px;
    }
    &-w40 {
      width: 40%;
      text-align: center;
    }
  }
}

.group1 {
  &-nums {
    flex-wrap: wrap;
    margin: 7 * 2px 15 * 2px 0 * 2px 15 * 2px;
    &-item {
      position: relative;
      width: 16 * 2px;
      height: 16 * 2px;
      margin-right: 10 * 2px;
      margin-bottom: 7 * 2px;
      &-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 16 * 2px;
        height: 16 * 2px;
        object-fit: cover;
      }

      &-text {
        position: relative;
        z-index: 1;
        color: #fff;
        font-size: 12 * 2px;
        font-weight: 590;
        line-height: 16 * 2px;
        text-align: center;
      }
    }
  }
}

.group5 {
  &-nums {
    border-radius: 6 * 2px;
    background: linear-gradient(90deg, #ccf0ff 0%, #cce5ff 100%);
    margin-bottom: 12 * 2px;
    padding: 18 * 2px 0;
    justify-content: center;
    &-item {
      position: relative;
      width: 16 * 2px;
      height: 16 * 2px;
      margin-right: 10 * 2px;
      &-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 16 * 2px;
        height: 16 * 2px;
        object-fit: cover;
      }

      &-text {
        position: relative;
        z-index: 1;
        color: #fff;
        font-size: 12 * 2px;
        font-weight: 590;
        line-height: 16 * 2px;
        text-align: center;
      }
    }
  }

  &-title {
    color: #007bff;
    font-size: 13 * 2px;
    font-weight: 590;
    margin-bottom: 12 * 2px;
    text-align: center;
  }

  &-text {
    color: #141924;
    font-size: 13 * 2px;
    font-weight: 400;
    margin-bottom: 4 * 2px;
    text-align: left;
  }

  &-item {
    color: #007bff;
    font-size: 13 * 2px;
    font-weight: 590;
    margin-bottom: 12 * 2px;
    text-align: center;
    padding: 8 * 2px 10 * 2px;
    border: 0.7px solid rgba(115, 119, 128, 0.15);

    &-nums {
      padding: 4 * 2px 6 * 2px;
      justify-content: center;
      &-item {
        position: relative;
        width: 16 * 2px;
        height: 16 * 2px;
        margin-right: 10 * 2px;

        &-bg {
          position: absolute;
          top: 0;
          left: 0;
          width: 16 * 2px;
          height: 16 * 2px;
          object-fit: cover;
        }

        &-text {
          position: relative;
          z-index: 1;
          color: #fff;
          font-size: 12 * 2px;
          font-weight: 590;
          line-height: 16 * 2px;
          text-align: center;
          &-xz {
            color: #8e96a4;
          }
        }
      }
    }
  }
}
</style>
